<script setup lang="ts">
import { getcolor, getluck, getword } from '@/utils/person';
import { getUserDetails, saveLuck } from '@/api/user';
import { TimePicker } from 'ant-design-vue';
import { onBeforeMount, ref } from 'vue';

const isLoade = ref(true);
const User = ref({ detail: {} });
const isclockin = ref();
const islogin = ref(false);
const luck = ref(0);
const random = (min: number, max: number) => Math.floor(Math.random() * (max - min + 1) + min);
const fetchUser = async () => {
  User.value = await getUserDetails();
  if (islogin.value == true) {
    if (User.value.detail.last_clockin != null) {
      if (new Date(User.value.detail.last_clockin).toDateString() != new Date().toDateString()) {
        isclockin.value = false;

      } else {
        isclockin.value = true;
        luck.value = User.value.detail.luck;
      }
    }
  }
  isLoade.value = false;
};
onBeforeMount(() => {
  if (localStorage.getItem('expire')) {
    const expire = localStorage.getItem('expire');
    const expire_time = new Date(expire).getTime();
    console.log(expire);
    if (expire_time > new Date().getTime())
      islogin.value = true;
  }
  fetchUser();
});
const clockin = async () => {
  luck.value = random(1, 12);
  const lastClockIn = new Date().toLocaleString('en-US', { timeZone: 'Asia/Shanghai' });
  const date = new Date(lastClockIn);
  const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  const code = await saveLuck(User.value.username, luck.value, dateStr);
  isclockin.value = true;
};
</script>

<template>
  <div class="home">
    <div class="main-content" v-if="islogin && !isLoade">
      <div class="content1">
        <div class="intro" >
          <img src="@/assets/zx.png"/>
        </div>
        <div class="clock-in">
          <div v-if="islogin && !isLoade">
            <div class="content2">
              <div>
                <span class='name' :style="{color:getcolor(User.detail.rating)}">
                  {{ User.username }}
                </span>
                <span class="t1">的今日运势</span>
              </div>
              <div v-if="isclockin">
                <span class='luck' :style="{color:getluck(luck).color}">
                  § {{ getluck(luck).text }} §
                </span>
                <div>
                  <div>
                    <span class="t2">
                      宜：{{ getword(luck).a1 }}
                    </span>
                    <span class="t3">
                      忌：{{ getword(luck).a2 }}
                    </span>
                  </div>
                  <div>
                    <span class="t2">
                      宜：{{ getword(luck).a3 }}
                    </span>
                    <span class="t3">
                      忌：{{ getword(luck).a4 }}
                    </span>
                  </div>
                </div>
              </div>
              <div v-if="!isclockin">
                <br>
                <br>
                <p class="hello">hello world</p>
                <br>
                <button class="clock-in-button" @click="clockin()">打卡</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="content1">
        <span>
          近期比赛
        </span>
        <span>
          推荐题目
        </span>
      </div>
    </div>
  </div>
</template>

<style>
.home {
  /* 整体布局 */
}

.main-content {
  padding: 50px 50px;
}

.content1 {
  width: 1160px;
  height: 350px;
  background-color: white;
  padding: 40px 20px;
}

.content2 {
  padding: 10px 15px;
}

.intro {
  float: left;

  padding: 10px 15px;
}

.clock-in {
  padding: 10px 15px;
}

.luck {
  padding: 10px;
  text-align: center;
  font-weight: 500;
  font: '黑体';
  font-size: 60px;
}

.name {
  padding: 10px 15px;
  font-weight: 500;
  font: '黑体';
  font-size: 20px;
}

.t1 {
  font-size: 20px;
  font-weight: 500;
  font: '黑体';
}

.t2 {
  padding: 10px 15px;
  color: #e74c3c;
  font-size: 20px;
  font-weight: 500;
  font: '黑体';
}

.t3 {
  padding: 10px 15px;
  font-size: 20px;
  font-weight: 500;
  font: '黑体';
}

.clock-in-button {
  color: #fff;
  background-color: #f37b1d;
  border-color: #f37b1d;
  display: inline-block;
  margin-bottom: 0;
  padding: .5em 1em;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  outline: 0;
}
</style>
<style scoped lang="less">
.home {
  height: 100%;
  text-align: center;
}
</style>
